<template>
	<div>
		<mainTop></mainTop>
		<div class="wzMiddleBox">
			<div class="wzDetail" >
				<div class="" style="text-align: center;border-bottom: 2px solid #ececec;padding-bottom: 20px;">
					<div style="font-size: 28px;font-weight: 600;color: #150e52;">{{ this.article.data.articleTitle }}</div>
					<div style="color: #bebebe;font-size: 18px;margin-top: 20px;">
						<div class="icon">
							<img src="../images/timeIcon.png" style="margin-right: 10px;margin-top: -5px;"/>
							<span>时间：{{ this.article.data.articlePublishTime }}</span>
						</div>
						<div class="icon">
							<img src="../images/linkIcon.png" style="margin-right: 10px;margin-top: -5px;"/>来源：{{ this.article.data.articleFrom }} 
						</div>
						<div class="icon" style="margin-right: 0px;">
							<img src="../images/author.png" style="margin-right: 10px;margin-top: -5px;"/>作者：{{ this.article.data.articleAuthor }} 
						</div>
					</div>
				</div>
				<div style="font-size: 16px;margin-top: 20px;line-height: 30px;color: #150e52;font-family: PingFangSC-Regular, sans-serif;min-height: 400px;"
					v-html="this.article.data.articleContent"
				>
					
				</div>
			</div>
		</div>
		<mainBottom></mainBottom>
	</div>
</template>

<script>
	import mainTop from '../components/mainTop.vue'
	import mainBottom from '../components/mainBottom.vue'
	import axios from 'axios';
	export default {
	  components: { 
		  mainTop,
		  mainBottom,
		  
	   },
	   data(){
		   return{
			article:'',
			   };
			},
		created(){
			this.getArticle();
		},
		methods:{
			getArticle(){
				axios.get('https://zha.heavenk.com/prod-api/web/article/'+this.$route.query.id).then((res)=>{
                    this.article=res.data
                })
			}
		},
		mounted(){
			this.getArticle();
		}
		}
</script>

<style>
	.wzMiddleBox{
		width: 100%;
		min-width: 1700px;
		background-color: #f6f6f6;
	}
	.wzDetail{
		width: 1140px;
		min-width: 1140px;
		/* height: 1070px; */
		margin: auto;
		margin-top: 55px;
	}
	.icon{
		display: inline-block;
		margin-right: 40px;
	}
</style>